<!DOCTYPE html > 
<html style="font-size:0px">
<head>  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>h5demo实例</title>
  <script type="text/javascript">
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              var ft=320/10.8 * (clientWidth / 320);
              docEl.style.fontSize = (ft>65?65:ft) + 'px';
            };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <link rel="stylesheet" href="http://img2.kunming.cn/zhuanti/dp_common/highlight/styles/agate.css">
		<script src="http://img2.kunming.cn/zhuanti/dp_common/highlight/highlight.pack.js"></script>
		<script>hljs.initHighlightingOnLoad();</script>
<style>
*{
  margin: 0;
  padding: 0;
}
  #index{
    font-size: .3rem;
    background: #f1f1f1;
    line-height: 1.8;
  }
  p{
  	padding: 5px 15px;
  }
  .hljs{
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  a{color: #62C8F3}
</style>
</head>
<body id="index">
 <div class="content">
 <p>
 	
 		使用步骤<br>
 1页头设置<br>
 </p>
<pre>
  <code class="html">
&lt;!DOCTYPE html &gt;
&lt;html style="font-size:0px" &gt;
  </code>
 </pre>
 
 <p class="black">
 2内联js<br>
   此处10.8为设计稿宽度/100的数值,如设计稿为1080则为10.8
 </p>
<pre>
  <code class="javascript">
    (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              var ft=320/10.8 * (clientWidth / 320);
              docEl.style.fontSize = (ft>65?65:ft) + 'px';
            };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
  </code>
 </pre>
<p style="text-align:center;padding-bottom:50px"> <a href="demo1.html">查看三栏分栏布局</a></p>
 </div>
</body>
</html>